<template>
  <div>

<el-card v-if="isshow == true">
  <el-button @click="isshow = 'fasle'">添加文献索引</el-button>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="介绍描述">
            <span>{{ props.row.content }}</span>
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
      label=" ID"
      prop="id">
    </el-table-column>
    <el-table-column
      label="介绍名称"
      prop="title">
    </el-table-column>
<el-table-column
      fixed="right"
      label="操作"
      width="120">
      <template slot-scope="scope">
        <el-button
          @click.native.prevent="deleteRow(scope.row.id)"
          type="text"
          size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
     <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total" background>
    </el-pagination>
</el-card>
<el-card v-else>
  <el-page-header @back="goBack" content="新增页面">
</el-page-header>
  <el-form ref="form" :model="addForm" label-width="80px">
  <el-form-item label="篇名">
    <el-input v-model="addForm.title"></el-input>
  </el-form-item>
  <el-form-item label="作者">
    <el-input v-model="addForm.author"></el-input>
  </el-form-item>
  <el-form-item label="刊名">
    <el-input v-model="addForm.bookname"></el-input>
  </el-form-item>
  <el-form-item label="年代">
    <el-input v-model="addForm.years"></el-input>
  </el-form-item>
  <el-form-item label="关键字">
   <el-input
  type="textarea"
  :autosize="{ minRows: 2, maxRows: 20}"
  placeholder="请输入内容"
  v-model="addForm.content">
</el-input>
  </el-form-item>
   <el-form-item>
     <el-button type="success" @click="addformbtn">上传数据</el-button>
      </el-form-item>
  </el-form>
</el-card>
<el-dialog title="图片预览" :visible.sync="isshowPhoto" width="50%">
      <img :src="previewPath" alt="" width="100%" class="sphoto" />
    </el-dialog>
  </div>
</template>

<script>
import { setwx,getwx,deletewx } from "network/request.js";

export default {
  created(){
this.getlist()
  },
data(){
  return {
    total:0,
    queryInfo: {
      query: '',
      pagenum: 1,
      pagesize: 10
  },
    imgll:[],
     previewPath: "",
     isshowPhoto: false,
    isshow:true,
    tableData:[],
    addForm:{
      title:'',
      content:'',
      years:'',
      author:'',
      bookname:'',
    },
    uploadURL: "http://localhost:3001/upload",
  }
},
methods:{
  async deleteRow(id){
    console.log(id);
    const {data:res} = await deletewx(id);
    console.log(res);
    this.getlist()
  },
  handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.getlist()
},
handleCurrentChange(newPage) {
this.queryInfo.pagenum = newPage
this.getlist()
},
  goBack(){
      this.isshow = true
  },
  async getlist(){
      const {data:res} = await getwx({params: this.queryInfo})
      console.log(res);
      this.tableData = res.results
      this.total = res.total
      console.log();
  },
  async addformbtn(){
      const res =await setwx(this.addForm)
      if(res.status == 200){
        this.$message.success('新增文献成功！')
        this.isshow = true
        this.addForm = {
      title:'',
      content:'',
      years:'',
      author:'',
      bookname:'',
    }
        this.getlist()
      }
  }
}
}
</script>

<style lang="scss" scoped>

</style>